<template>
	<div class="MyEva_body">
		<div class="MyEva_nva">
			<div>
				<router-link :to="`/mobile/bookdetail/${id}`">
					<p>返回</p>
				</router-link>
			</div>
			<div>
				<p>商品</p>
			</div>
			<div>
				<p>详情</p>
			</div>
			<div>
				<p>评论 </p>
			</div>
			<div>
				<p>推荐</p>
			</div>
		</div>
		<hr style="width: 100%;" />
		<div class="MyEva_Option">
			<p>
				<router-link to="/mobile/home">推荐</router-link>
			</p>
			<p>
				<router-link to="/mobile/Shoppingcart">购物车</router-link>
			</p>
			<p>
				<router-link to="/mobile/user">个人中心</router-link>
			</p>

		</div>
		<hr style="width: 100%;" />
		<div class="MyEva_Option2">
			<div class="bookpic">

				<img :src="`http://127.0.0.1/api/public/showimg/${pic}`" />
			</div>
			<div class="Book_Rate">
				<el-rate v-model="com.rate" :colors="colors">
				</el-rate>
			</div>
		</div>
		<div class="MyEva_Option3">
			<div>
				<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容"
					v-model="com.content">
				</el-input>
			</div>
		</div>
		<div class="MyEva_Option4">
			<button @click="Leavecomment">发表</button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MobileMyEva',
		data() {
			return {
				colors: ['#99A9BF', '#F7BA2A',
					'#FF9900'
				], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }

				pic: '',
				com: {
					content: '',
					rate: 0,
				},
				id:'',
			}
		},
		methods: {
			Leavecomment() {
				console.log(this.com);
				this.$postf("/api/public/rate/add/" + this.id,this.com).then((resp) => {
					console.log(resp.data)
				})
			}
		},
		mounted() {
			this.pic = this.$route.fullPath.split('/')[4];
			this.id =this.$route.fullPath.split('/')[3]
		}
	}
</script>

<style>
	.MyEva_Option3 {
		margin-top: 5%;
	}

	.MyEva_Option4 {
		width: 100%;
		margin-top: 30%;
	}

	.MyEva_Option4 button {
		width: 100%;
	}

	.Book_Rate {
		width: 100%;
		display: flex;
		align-items: center;

	}

	.MyEva_Option2 {
		display: flex;
		width: 100%;
	}

	.MyEva_Option2 img {
		margin-top: 10%;
		width: 45%;
	}

	.MyEva_Option p {
		margin-top: 10%;
	}

	.MyEva_nva {
		width: 100%;
		display: flex;
	}

	.MyEva_nva p {
		font-size: 25px;
	}

	.MyEva_nva div {
		margin-left: 20px;
	}

	.MyEva_body {
		margin: 0;
		padding: 0;
		width: 100%;
	}
</style>
